<link rel="stylesheet" href="../../dist/css/card.min.css">

<div class="card">
    <h2>银行卡管理</h2>
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab"
                aria-controls="pills-home" aria-selected="true">线下充值</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab"
                aria-controls="pills-profile" aria-selected="false">线上充值（第三方平台）</a>
        </li>
    </ul>
    <div class="tab-content border-top" id="pills-tabContent">
        <div class="tab-pane fade show active tab_underline" id="pills-home" role="tabpanel"
            aria-labelledby="pills-home-tab">
            <table class="table">
                <thead>
                    <tr>
                        <th scope="col">银行名称</th>
                        <th scope="col">开户人姓名</th>
                        <th scope="col">银行帐号</th>
                        <th scope="col">开户行支行名称</th>
                    </tr>
                </thead>
                <tbody class="showCard">
                    <!-- <tr>
                        <th scope="row" class="bankName"></th>
                        <td class="username">源代码</td>
                        <td class="cardNumber">62170038233428412750</td>
                        <td class="branchName">府城大道支行</td>
                    </tr> -->
                </tbody>
            </table>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary show_btn" data-toggle="modal" data-target="#staticBackdrop">
                绑定银行卡
            </button>

            <!-- Modal -->
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
                role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">绑定银行卡</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>
                                <p class="bankName">银行名称
                                    <select>
                                        <option value="1">汇丰银行</option>
                                        <option value="2">得不到银行</option>
                                        <option value="3">中国银行</option>
                                        <option value="4">工商银行</option>
                                        <option value="5">吴彦祖</option>
                                    </select>
                                </p>
                                <!-- <p class="username">用户名称
                            <input type="text">
                        </p> -->
                                <p class="cardNumber">银行卡号
                                    <input type="text">
                                </p>
                                <p class="branchName">支行名称
                                    <input type="text">
                                </p>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary bind_btn" data-dismiss="modal">确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade tab_upline" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
            系统暂不支持，请采用线下充值
        </div>
    </div>

</div>

<script src="../../03-js/bank_card.js"></script>